﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <title>SQCDP生产绩效看板</title>
  <style>
    html {
      background-image: url(../images/bg.jpg);
      color: #fff;
    }

    .header-title {
      font-size: 24px !important;
    }

    .el-form-item__label {
      color: #fff;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .svg-box {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
    }

    .svg-item {
      /* 宽高比 3:4 */
      width: 195px;
      height: 260px;
      margin: 0 50px;
    }

    .chart {
      width: 100%;
      height: 305px;
    }

    .dv-scroll-board .row-item {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div style="padding:0 5px;">
      <el-row>
        <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
        <el-col :span="12" class="header-title">热表厂SQCDP生产绩效看板</el-col>
        <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
      </el-row>

      <!-- 查询区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" style="margin: 0 10px" :label-position="'left'"
        :rules="rules">
        <el-form-item label="年月:" prop="yearmonth">
          <el-date-picker v-model=" queryInfo.yearmonth" type="month" value-format="yyyy-MM" style="width: 120px;"
            @change="selectYearMonthChange">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="指标颗粒度:" prop="selectOrg">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
            v-model="queryInfo.selectOrg" clearable style="width:340px;">
          </el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- SQCDP -->
      <div class="svg-box">
        <div class="svg-item" id="svg-s"></div>
        <div class="svg-item" id="svg-q"></div>
        <div class="svg-item" id="svg-c"></div>
        <div class="svg-item" id="svg-d"></div>
        <div class="svg-item" id="svg-p"></div>
      </div>

      <!-- S、Q、C svg -->
      <el-row>
        <el-col :span="8">
          <dv-border-box-11 title="S 三违及安全隐患" style="padding-top:40px;">
            <div class="chart" id="s-chart"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8" style="position:relative;">
          <div class="tooltip">
            统计说明
            <el-popover placement="top-start" title="一次交检合格率计算规则:" width="600" trigger="hover">
              <i class="el-icon-info" slot="reference"></i>
              <p>统计每日已检验批次中，未产生报废的批次所占比率。</p>
          </div>
          <dv-border-box-11 title="Q 一次交检合格率" style="padding-top:40px;">
            <div class="chart" id="q-chart"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8">
          <dv-border-box-11 title="C 在制品批次数" style="padding-top:40px;">
            <div class="chart" id="c-chart"></div>
          </dv-border-box-11>
        </el-col>
      </el-row>

      <!-- D、P、轮播表 -->
      <el-row>
        <el-col :span="8">
          <dv-border-box-11 title="D 计划按时完成率" style="padding-top:40px;">
            <div class="chart" id="d-chart"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8">
          <dv-border-box-11 title="P 培训计划完成率" style="padding-top:40px;">
            <div class="chart" id="p-chart"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8">
          <dv-border-box-11 title="指标问题描述" style="padding-top:40px;">
            <div style="margin: 20px;height: 285px;">
              <dv-scroll-board id="scrollBoard" :config="scrollBoardConfig" style="height:265px;width: 100%;"
                @click="showData">
              </dv-scroll-board>
            </div>
          </dv-border-box-11>
        </el-col>
      </el-row>

      <!-- s-SVG明细 -->
      <el-dialog :title="safeSvgDetail.title" :visible.sync="safeSvgDetail.dialogVisiable" width="98%" :top="'10px'"
        :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="safeSvgDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="问题描述" prop="description" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="整改措施" prop="improvemeasures" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="要求整改时间" prop="needfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前进度" prop="schedule" width="120" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.schedule !== null">
              <el-progress :percentage="scope.row.schedule"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="责任人" prop="dealemployee" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改时间" prop="lastchangedate" width="100" :formatter="splitDate"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- q-SVG明细 -->
      <el-dialog :title="qualitySvgDetail.title" :visible.sync="qualitySvgDetail.dialogVisiable" width="98%"
        :top="'10px'" :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="qualitySvgDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" show-overflow-tooltip></el-table-column>
          <el-table-column label="一次交检合格率" prop="passrate" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">{{scope.row.passrate}}%</span>
              <span v-else>{{scope.row.passrate}}/</span>
            </template>
          </el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="问题描述" prop="description" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.description}}</span>
            </template>
          </el-table-column>
          <el-table-column label="整改措施" prop="improvemeasures" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.improvemeasures}}</span>
            </template>
          </el-table-column>
          <el-table-column label="要求整改时间" prop="needfinishdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>
                <span v-if="scope.row.needfinishdate">{{scope.row.needfinishdate.split('T')[0]}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="完成时间" prop="finishdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>
                <span v-if="scope.row.finishdate">{{scope.row.finishdate.split('T')[0]}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="当前进度" prop="schedule" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>
                <span v-if="scope.row.schedule !== null">
                  <el-progress :percentage="scope.row.schedule"></el-progress>
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="责任人" prop="dealemployee" width="70" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.dealemployee}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="批次号" prop="containername" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.containername}}</span>
            </template>
          </el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.workflowstepname}}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.creater}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>{{scope.row.updater}}</span>
            </template>
          </el-table-column>
          <el-table-column label="修改时间" prop="lastchangedate" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.itemname === '一次交检合格率'">/</span>
              <span v-else>
                <span v-if="scope.row.lastchangedate">{{scope.row.lastchangedate.split('T')[0]}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- c-SVG明细 -->
      <el-dialog :title="costSvgDetail.title" :visible.sync="costSvgDetail.dialogVisiable" width="70%" :top="'10px'"
        :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="costSvgDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="在制批次数" prop="qty" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-dialog>

      <!-- d-SVG明细 -->
      <el-dialog :title="deliverSvgDetail.title" :visible.sync="deliverSvgDetail.dialogVisiable" width="70%"
        :top="'10px'" :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="deliverSvgDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="计划按时完成率" prop="intimefinishrate" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.intimefinishrate"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- p-SVG明细 -->
      <el-dialog :title="personSvgDetail.title" :visible.sync="personSvgDetail.dialogVisiable" width="98%" :top="'10px'"
        :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="personSvgDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="问题描述" prop="description" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="整改措施" prop="improvemeasures" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="要求整改时间" prop="needfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前进度" prop="schedule" width="120" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.schedule !== null">
              <el-progress :percentage="scope.row.schedule"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="责任人" prop="dealemployee" width="70" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column label="批次号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column> -->
          <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改时间" prop="lastchangedate" width="100" :formatter="splitDate"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- s-折线图明细 -->
      <el-dialog :title="safeChartDetail.title" :visible.sync="safeChartDetail.dialogVisiable" width="98%" :top="'10px'"
        :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="safeChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="问题描述" prop="description" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="整改措施" prop="improvemeasures" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="要求整改时间" prop="needfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前进度" prop="schedule" width="120" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.schedule !== null">
              <el-progress :percentage="scope.row.schedule"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="责任人" prop="dealemployee" width="70" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column label="批次号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column> -->
          <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改时间" prop="lastchangedate" width="100" :formatter="splitDate"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- q-折线图明细-->
      <el-dialog :title="qualityChartDetail.title" :visible.sync="qualityChartDetail.dialogVisiable" width="98%"
        :top="'10px'" :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="qualityChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="工区" prop="workcentername" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="班组" prop="teamname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="派工数" prop="dispatchqty" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="派工人" prop="dispatchemployeename" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="派工时间" prop="dispatchdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="报工数" prop="reportqty" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="报工人" prop="reportemployeename" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="报工时间" prop="reportdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="检验员" prop="checkemployeename" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="检验时间" prop="checkdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="合格数" prop="passqty" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="报废数" prop="lossqty" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-dialog>

      <!-- c-折线图明细 -->
      <el-dialog :title="costChartDetail.title" :visible.sync="costChartDetail.dialogVisiable" width="98%" :top="'10px'"
        :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="costChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="开卡时间" prop="originalstartdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="数量" prop="qty" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="workflowstepname" show-overflow-tooltip></el-table-column>
          <el-table-column label="工区" prop="workcentername" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="班组" prop="teamname" width="200" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination @current-change="handleCostChartDetailCurrentChange"
          :current-page="costChartDetail.queryInfo.currentPage" :page-sizes="[costChartDetail.queryInfo.pageSize]"
          :page-size="costChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="costChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- d-折线图明细 -->
      <el-dialog :title="deliverChartDetail.title" :visible.sync="deliverChartDetail.dialogVisiable" width="98%"
        :top="'10px'" :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="deliverChartDetail.dataList" stripe border>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="主制分厂" prop="fromfactory" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="承制分厂" prop="tofactory" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件图号" prop="productname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column label="数量" prop="qty" width="50"></el-table-column>
          <el-table-column label="排产工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="排产日期" prop="stepplancreatedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="计划发出时间" prop="plannedstartdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="实际发出时间" prop="senddate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="接收时间" prop="toacceptdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="接收人" prop="receiver" width="60"></el-table-column>
          <el-table-column label="计划完成时间" prop="plannedfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="实际完成时间" prop="completedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="转入时间" prop="recivedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前工序" prop="currentworkflowstepname" width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="完成超期时间" prop="finishdelaydays" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.finishdelaydays > 0" style="color:red;font-weight:bold;">
                <i class="el-icon-warning"></i> {{scope.row.finishdelaydays}}天
              </div>
              <div v-else>
                {{scope.row.finishdelaydays}}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- p-折线图明细 -->
      <el-dialog :title="personChartDetail.title" :visible.sync="personChartDetail.dialogVisiable" width="98%"
        :top="'10px'" :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="personChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="问题描述" prop="description" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="整改措施" prop="improvemeasures" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="要求整改时间" prop="needfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前进度" prop="schedule" width="120" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.schedule !== null">
              <el-progress :percentage="scope.row.schedule"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="责任人" prop="dealemployee" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改时间" prop="lastchangedate" width="100" :formatter="splitDate"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
  <script src=" ../Scripts/echarts/echarts-5.4.0.min.js">
  </script>
  <script type="module">
    import { getParams } from '../Scripts/hooks/useCommonMethod.js'
    import { barOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { sMapping, qMapping, cMapping, dMapping, pMapping } from '../Scripts/hooks/sqcdpMapping.js'
    import { getMESOrginazition, getFactoryInfo } from '../Scripts/hooks/fetchAPI.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    const app = new Vue({
      el: '#app',
      data: {
        splitDate,
        currentTime: '',
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: { yearmonth: '', startOfSelectMonth: '', endOfSelectMonth: '', today: '', selectOrg: '', factoryname: '', thismonth: '' },
        rules: {
          yearmonth: [{ required: true, message: '年月不能为空', trigger: 'change' }],
          selectOrg: [{ required: true, message: '指标颗粒度不能为空', trigger: 'change' }]
        },
        orginazition: [],
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff' },
        scrollBoardConfig: {},
        // s-svg明细
        safeSvgDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // q-svg明细
        qualitySvgDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // c-svg明细
        costSvgDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // d-svg明细
        deliverSvgDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // p-svg明细
        personSvgDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // s-折线图明细
        safeChartDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // q-折线图明细
        qualityChartDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // c-折线图明细
        costChartDetail: {
          dialogVisiable: false, dataList: [],
          queryInfo: { selectdate: '', factoryname: '', currentPage: 1, pageSize: 12 },
          title: '', total: 0
        },
        // d-折线图明细
        deliverChartDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' },
        // p-折线图明细
        personChartDetail: { dialogVisiable: false, dataList: [], queryInfo: {}, title: '' }
      },
      methods: {
        addElement(path, color, day, x, y, svg, sqcdptype) {
          // 绘制日期网格
          let c = document.createElementNS('http://www.w3.org/2000/svg', 'path');
          c.setAttribute('stroke', '#000'); //线条颜色
          c.setAttribute('d', path); //线条路径坐标
          c.setAttribute('stroke-width', '1.5');

          if (color === "red") {
            c.setAttribute('fill', '#FF0000'); //红背景色
          } else if (color === "green") {
            c.setAttribute('fill', '#00FF00'); //绿背景色
          } else {
            c.setAttribute('fill', '#FFF'); //白背景色
          }

          svg.appendChild(c);

          // 日期文本
          let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", parseInt(x) - 5);
          t.setAttribute("y", parseInt(y) + 5);
          t.setAttribute('font-size', '12');
          t.setAttribute("stroke", "#000");
          t.setAttribute("cursor", "pointer");
          t.innerHTML = day;
          t.onclick = () => { this.showSvgDetail(sqcdptype, color, day); }
          svg.appendChild(t);
        },
        // 生成S-SVG
        async createS() {
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getSafeSvgData', {
            type: 'getSafeSvgData', ...this.queryInfo
          })

          if (meta.status === 500) { return this.$message.error(meta.msg); }

          let body = document.getElementById("svg-s");

          if (body.hasChildNodes()) {
            body.innerHTML = "";
          }

          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          //生成文字'S'
          let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 101.5);
          t.setAttribute("y", 126.475147);
          t.setAttribute("transform", "matrix(16.625954189664085,0,0,13.281110010907954,-1686.664063439021,-1388.4654854874102)");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'S';
          svg.appendChild(t);
          for (const i of sMapping) {
            if (dayjs().isBefore(dayjs(`${this.queryInfo.yearmonth}-${i.date}`))) {
              this.addElement(i.path, '', i.date, i.x, i.y, svg, t.innerHTML);
            } else {
              if (data.some(item => item.day === i.date && item.iswarning > 0)) {
                this.addElement(i.path, 'red', i.date, i.x, i.y, svg, t.innerHTML);
              } else {
                this.addElement(i.path, 'green', i.date, i.x, i.y, svg, t.innerHTML);
              }
            }
          }
        },
        // 生成Q-SVG
        async createQ() {
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getQualitySvgData', {
            type: 'getQualitySvgData', ...this.queryInfo
          })

          if (meta.status === 500) { return this.$message.error(meta.msg); }

          let body = document.getElementById("svg-q");
          if (body.hasChildNodes()) {
            body.innerHTML = "";
          }
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 101.744892);
          t.setAttribute("y", 126.776327);
          t.setAttribute("transform", "matrix(14.292023137032933,0,0,13.28111001090795,-1454.9806297553127,-1390.46548548741) ");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'Q';
          svg.appendChild(t);
          for (const i of qMapping) {
            if (dayjs().isBefore(dayjs(`${this.queryInfo.yearmonth}-${i.date}`))) {
              this.addElement(i.path, '', i.date, i.x, i.y, svg, t.innerHTML);
            } else {
              if (data.some(item => item.day === i.date && item.isover > 0)) {
                this.addElement(i.path, 'red', i.date, i.x, i.y, svg, t.innerHTML);
              } else {
                this.addElement(i.path, 'green', i.date, i.x, i.y, svg, t.innerHTML);
              }
            }
          }
        },
        // 生成C-SVG
        async createC() {
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getCostSvgData', {
            type: 'getCostSvgData', ...this.queryInfo
          })

          if (meta.status === 500) { return this.$message.error(meta.msg); }

          let body = document.getElementById("svg-c");
          if (body.hasChildNodes()) {
            body.innerHTML = "";
          }
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("transform", "matrix(14.605068678223846,0,0,13.28111001090795,-1538.805049635418,-1343.96548548741)");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'C';
          svg.appendChild(t);
          for (const i of cMapping) {
            if (dayjs().isBefore(dayjs(`${this.queryInfo.yearmonth}-${i.date}`))) {
              this.addElement(i.path, '', i.date, i.x, i.y, svg, t.innerHTML);
            } else {
              if (data.some(item => item.day === i.date && item.iswarning > 0)) {
                this.addElement(i.path, 'red', i.date, i.x, i.y, svg, t.innerHTML);
              } else {
                this.addElement(i.path, 'green', i.date, i.x, i.y, svg, t.innerHTML);
              }
            }
          }
        },
        // 生成d-SVG
        async createD() {
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getDeliverSvgData', {
            type: 'getDeliverSvgData', ...this.queryInfo
          })

          if (meta.status === 500) { return this.$message.error(meta.msg); }

          let body = document.getElementById("svg-d");
          if (body.hasChildNodes()) {
            body.innerHTML = "";
          }
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105.343346);
          t.setAttribute("y", 122.672754);
          t.setAttribute("transform", "matrix(15.288862974380933,0,0,13.28111001090795,-1610.8059724484322,-1343.96548548741)");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'D';
          svg.appendChild(t);

          for (const i of dMapping) {
            if (dayjs().isBefore(dayjs(`${this.queryInfo.yearmonth}-${i.date}`))) {
              this.addElement(i.path, '', i.date, i.x, i.y, svg, t.innerHTML);
            } else {
              if (data.some(item => item.day === i.date && item.iswarning > 0)) {
                this.addElement(i.path, 'red', i.date, i.x, i.y, svg, t.innerHTML);
              } else {
                this.addElement(i.path, 'green', i.date, i.x, i.y, svg, t.innerHTML);
              }
            }
          }
        },
        // 生成P-SVG
        async createP() {
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getPersonSvgData', {
            type: 'getPersonSvgData', ...this.queryInfo
          })

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          let body = document.getElementById("svg-p");
          if (body.hasChildNodes()) {
            body.innerHTML = "";
          }
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 101.5);
          t.setAttribute("y", 126.475147);
          t.setAttribute("transform", "matrix(16.625954189664085,0,0,13.281110010907954,-1686.664063439021,-1388.4654854874102) ");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'P';
          svg.appendChild(t);
          for (const i of pMapping) {
            if (dayjs().isBefore(dayjs(`${this.queryInfo.yearmonth}-${i.date}`))) {
              this.addElement(i.path, '', i.date, i.x, i.y, svg, t.innerHTML);
            } else {
              if (data.some(item => item.day === i.date && item.iswarning > 0)) {
                this.addElement(i.path, 'red', i.date, i.x, i.y, svg, t.innerHTML);
              } else {
                this.addElement(i.path, 'green', i.date, i.x, i.y, svg, t.innerHTML);
              }
            }
          }
        },
        // S-折线图
        async getSChartData() {
          const dom = document.getElementById("s-chart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getSChartData', {
            type: 'getSChartData', ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrDate = [], arrQty = [];
          for (const i of data) {
            arrDate.push(i.day);
            arrQty.push(i.qty);
          }

          let option = barOption({ showDataZoom: true, startValue: 0, endValue: 14 });
          option.legend.data = ['数量'];//设置图例文字
          option.xAxis.data = arrDate;
          option.yAxis[1].show = false;

          const { color, colorStops } = colorList.yellow;
          option.series[0] = _.merge(option.series[0], {
            name: '数量',
            data: arrQty,
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorStops)
            },
            symbolSize: 10,
            lineStyle: { width: 3, color: color },
            label: { color: color },
            itemStyle: { color: color }
          });

          chart.setOption(option);
          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            this.getSafeChartDetail(name);
          })
        },
        // Q-折线图
        async getQChartData() {
          const dom = document.getElementById("q-chart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getQChartData', {
            type: 'getQChartData', ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrDate = [], arrQty = [];
          for (const i of data) {
            arrDate.push(i.day);
            arrQty.push(i.passrate);
          }

          let option = barOption({ showDataZoom: true, startValue: 0, endValue: 14 });
          option.legend.data = ['一次交检合格率'];//设置图例文字
          option.xAxis.data = arrDate;
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; }
          option.yAxis[1].show = false;

          const { color, colorStops } = colorList.green;
          option.series[0] = _.merge(option.series[0], {
            name: '一次交检合格率',
            data: arrQty,
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorStops)
            },
            symbolSize: 10,
            lineStyle: { width: 3, color: color },
            label: { color: color, formatter: '{c}%' },
            itemStyle: { color: color }
          });
          chart.setOption(option);
          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            this.getQualityChartDetail(name);
          })
        },
        // C-折线图
        async getCChartData() {
          const dom = document.getElementById("c-chart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getCChartData', {
            type: 'getCChartData', ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrDate = [], arrQty = [];
          for (const i of data) {
            arrDate.push(i.day);
            arrQty.push(i.qty);
          }

          let option = barOption({ showDataZoom: true, startValue: 0, endValue: 14 });
          option.legend.data = ['在制批次数'];//设置图例文字
          option.xAxis.data = arrDate;
          option.yAxis[1].show = false;

          const { color, colorStops } = colorList.blue;
          option.series[0] = _.merge(option.series[0], {
            name: '在制批次数',
            data: arrQty,
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgb(128, 255, 165)' },
                { offset: 1, color: 'rgb(1, 191, 236)' }
              ])
            },
            symbolSize: 10,
            lineStyle: { width: 3, color: color },
            label: { color: color },
            itemStyle: { color: color }
          });
          chart.setOption(option);
          chart.on('click', (params) => {
            const { seriesName, name: day, value } = params;
            const { yearmonth, selectOrg } = this.queryInfo;
            const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
            this.costChartDetail.dialogVisiable = true;
            this.costChartDetail.title = `在【${selectdate}】开卡，当前未完工批次明细`;
            this.costChartDetail.queryInfo.selectdate = selectdate;
            this.costChartDetail.queryInfo.factoryname = this.queryInfo.factoryname;
            this.costChartDetail.queryInfo.currentPage = 1;
            this.getCostChartDetail();
          })
        },
        // D-折线图
        async getDChartData() {
          const dom = document.getElementById("d-chart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getDChartData', {
            type: 'getDChartData', ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrDate = [], arrQty = [];
          for (const i of data) {
            if (this.queryInfo.yearmonth === this.queryInfo.thismonth) {
              if (dayjs().isAfter(i.monthday)) {
                arrDate.push(i.day);
                arrQty.push(i.intimefinishrate);
              }
            } else {
              arrDate.push(i.day);
              arrQty.push(i.intimefinishrate);
            }
          }

          let option = barOption({ showDataZoom: true, startValue: 0, endValue: 14 });
          option.legend.data = ['计划按时完成率'];
          option.xAxis.data = arrDate;
          option.yAxis[1].show = false;
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; }

          const { color, colorStops } = colorList.green;
          option.series[0] = _.merge(option.series[0], {
            name: '计划按时完成率',
            data: arrQty,
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorStops)
            },
            symbolSize: 10,
            lineStyle: { width: 3, color: color },
            label: { color: color, formatter: '{c}%', rotate: 30 },
            itemStyle: { color: color }
          });

          chart.setOption(option);
          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            this.getDeliverChartDetail(name);
          })
        },
        // P-折线图
        async getPChartData() {
          const dom = document.getElementById("p-chart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getPChartData', {
            type: 'getPChartData', ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrDate = [], arrQty = [];
          for (const i of data) {
            arrDate.push(i.day);
            arrQty.push(i.schedule);
          }

          let option = barOption({ showDataZoom: true, startValue: 0, endValue: 14 });
          option.legend.data = ['培训计划完成率'];//设置图例文字
          option.xAxis.data = arrDate;
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; }
          option.yAxis[1].show = false;

          const { color, colorStops } = colorList.blue;
          option.series[0] = _.merge(option.series[0], {
            name: '培训计划完成率',
            data: arrQty,
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorStops)
            },
            symbolSize: 10,
            lineStyle: { width: 3, color: color },
            label: { color: color, formatter: '{c}%' },
            itemStyle: { color: color }
          });
          chart.setOption(option);
          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            this.getPersonChartDetail(name);
          })
        },
        // 查询轮播表数据
        async getScrollBoardtData() {
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getScrollBoardtData', {
            type: 'getScrollBoardtData', ...this.queryInfo
          })
          let scrollBoardData = [];
          for (const item of data) {
            let { sqcdptype, itemname, createdate, needfinishdate, dealemployee, schedule } = item;
            scrollBoardData.push([sqcdptype, itemname, createdate, needfinishdate, dealemployee, schedule]);
          }
          this.scrollBoardConfig = {
            data: scrollBoardData,
            header: ['指标', '指标名称', '提出时间', '要求完成', '责任人', '进度'],
            columnWidth: [45, 55, 175, 110, 110, 70, 70],
            waitTime: 1500,
            align: ['left', 'left', 'left', 'left', 'left', 'left', 'left'],
            index: true,// 显示行号
            rowNum: 5,// 每页10行
            carousel: 'single',// 'single|page'
            headerBGC: '#409EFF',// 表头行背景色
            oddRowBGC: '#003B51',// 奇数行背景色
            evenRowBGC: 'transparent',// 偶数行背景色 }
          };
        },
        showData(config) { },
        showSvgDetail(sqcdptype, color, day) {
          if (!dayjs().isBefore(dayjs(`${this.queryInfo.yearmonth}-${day}`))) {
            if (sqcdptype === 'S' && color === 'red') {
              this.getSafeSvgDetail(day);
            }
            if (sqcdptype === 'Q' && color === 'red') {
              this.getQualitySvgDetail(day);
            }
            if (sqcdptype === 'C' && color === 'red') {
              this.getCostSvgDetail(day);
            }
            if (sqcdptype === 'D' && color === 'red') {
              this.getDeliverSvgDetail(day);
            }
            if (sqcdptype === 'P' && color === 'red') {
              this.getPersonSvgDetail(day);
            }
          }
        },
        // s-svg明细
        async getSafeSvgDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.safeSvgDetail.dialogVisiable = true;
          this.safeSvgDetail.title = `【${selectdate}】S指标明细`;
          this.safeSvgDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'S', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getSafeSvgDetail', {
            type: 'getSafeSvgDetail', ...this.safeSvgDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.safeSvgDetail.dataList = data;
        },
        // q-svg明细
        async getQualitySvgDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.qualitySvgDetail.dialogVisiable = true;
          this.qualitySvgDetail.title = `【${selectdate}】Q指标明细`;
          this.qualitySvgDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'Q', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getQualitySvgDetail', {
            type: 'getQualitySvgDetail', ...this.qualitySvgDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.qualitySvgDetail.dataList = data;
        },
        // c-svg明细
        async getCostSvgDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.costSvgDetail.dialogVisiable = true;
          this.costSvgDetail.title = `【${selectdate}】C指标明细`;
          this.costSvgDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'C', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getCostSvgDetail', {
            type: 'getCostSvgDetail', ...this.costSvgDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.costSvgDetail.dataList = data;
        },
        // d-svg明细
        async getDeliverSvgDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.deliverSvgDetail.dialogVisiable = true;
          this.deliverSvgDetail.title = `【${selectdate}】D指标明细`;
          this.deliverSvgDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'D', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getDeliverSvgDetail', {
            type: 'getDeliverSvgDetail', ...this.deliverSvgDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.deliverSvgDetail.dataList = data;
        },
        // p-svg明细
        async getPersonSvgDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.personSvgDetail.dialogVisiable = true;
          this.personSvgDetail.title = `【${selectdate}】P指标明细`;
          this.personSvgDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'P', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getPersonSvgDetail', {
            type: 'getPersonSvgDetail', ...this.personSvgDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.personSvgDetail.dataList = data;
        },
        // s-折线图明细
        async getSafeChartDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.safeChartDetail.dialogVisiable = true;
          this.safeChartDetail.title = `【${selectdate}】S指标明细`;
          this.safeChartDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'S', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getSafeChartDetail', {
            type: 'getSafeChartDetail', ...this.safeChartDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.safeChartDetail.dataList = data;
        },
        // q-折线图明细
        async getQualityChartDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.qualityChartDetail.dialogVisiable = true;
          this.qualityChartDetail.title = `【${selectdate}】报废批次明细`;
          this.qualityChartDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'Q', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getQualityChartDetail', {
            type: 'getQualityChartDetail', ...this.qualityChartDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.qualityChartDetail.dataList = data;
        },
        // c-折线图明细
        async getCostChartDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getCostChartDetail', {
            type: 'getCostChartDetail', ...this.costChartDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.costChartDetail.dataList = data;
          this.costChartDetail.total = total;
        },
        // c-折线图明细分页事件
        handleCostChartDetailCurrentChange(newPage) {
          this.costChartDetail.queryInfo.currentPage = newPage;
          this.getCostChartDetail();
        },
        // d-折线图明细
        async getDeliverChartDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.deliverChartDetail.dialogVisiable = true;
          this.deliverChartDetail.title = `【${selectdate}】未按计划完成明细`;
          this.deliverChartDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'Q', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getDeliverChartDetail', {
            type: 'getDeliverChartDetail', ...this.deliverChartDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.deliverChartDetail.dataList = data;
        },
        // p-折线图明细
        async getPersonChartDetail(day) {
          const { yearmonth, selectOrg } = this.queryInfo;
          const selectdate = `${yearmonth}-${day < 10 ? '0' + day : day}`;
          this.personChartDetail.dialogVisiable = true;
          this.personChartDetail.title = `【${selectdate}】培训计划完成率明细`;
          this.personChartDetail.queryInfo = { yearmonth, selectdate, selectOrg, sqcdptype: 'Q', factoryname: this.queryInfo.factoryname };
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbAEOSDashBoard.ashx?action=getPersonChartDetail', {
            type: 'getPersonChartDetail', ...this.personChartDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.personChartDetail.dataList = data;
        },
        selectYearMonthChange(val) {
          if (val) {
            this.queryInfo.startOfSelectMonth = dayjs(this.queryInfo.yearmonth).startOf('month').format('YYYY-MM-DD');
            this.queryInfo.endOfSelectMonth = dayjs(this.queryInfo.yearmonth).endOf('month').format('YYYY-MM-DD');
          }
        },
        getData() {
          this.$refs['queryInfoRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              this.createS();
              this.createQ();
              this.createC();
              this.createD();
              this.createP();
              this.getSChartData();
              this.getQChartData();
              this.getCChartData();
              this.getPChartData();
              this.getDChartData();
              this.getScrollBoardtData();
            }
          });
        }
      },
      async mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        const factoryInfo = await getFactoryInfo({ factoryid: Decrypt(getParams('factoryid')), isMapping: '是' });
        const { factoryname } = factoryInfo[0];
        this.queryInfo.factoryname = factoryname;

        this.queryInfo.yearmonth = dayjs().format('YYYY-MM');
        this.queryInfo.thismonth = dayjs().format('YYYY-MM');
        this.queryInfo.startOfSelectMonth = dayjs(this.queryInfo.yearmonth).startOf('month').format('YYYY-MM-DD');
        this.queryInfo.endOfSelectMonth = dayjs(this.queryInfo.yearmonth).endOf('month').format('YYYY-MM-DD');
        this.queryInfo.today = dayjs().format('YYYY-MM-DD');
        this.orginazition = await getMESOrginazition({ isMapping: '是', factoryCode: '602' });
        this.queryInfo.selectOrg = [this.orginazition[0].value];
        this.getData();
      }
    })
  </script>
</body>

</html>